<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>服务时间</title>
    <link rel="stylesheet" type="text/css" href="preview/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="preview/css/service.css" />
    <style>
    </style>
</head>
<body>
<div class="serviceTime">
    <div class="wrap box_border">
        <div class="title">服务时间</div>
        <div class="wrapContent">
            <div class="wrapDate">
                <div id="wrapDate">
                    开馆时间：周一：14:00-18:00，周二至周日：9:00-18:00
                </div>
                <!--<div class="summerDate fl">-->
                    <!--<p>周一：14:00-18:00</p>-->
                    <!--<p>周二至周日：9:00-18:00</p>-->
                <!--</div>-->
                <!--<div class="winterDate fr">-->
                    <!--<p>周一：14:00-18:00</p>-->
                    <!--<p>周二至周日：9:00-18:00</p>-->
                <!--</div>-->

            </div>
            <div class="wrapTip">
                <div id="tipText" class="">天冷加衣</div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="preview/js/jquery.min.js"></script>
<script src="preview/js/rem.js"></script>
<script>
    var childWidth,//内容宽度
        moveTime,
        dataHeight,
        dataMoveTime;///执行时间
    window.onresize = function() {
        getRem(100, 607);
    };
    window.onload = function() {
        getRem(100, 607);
        function move(){
            ///下面
            childWidth=$('#tipText').width();
            moveTime=parseInt(childWidth/10*1000);
            ///上面
            dataHeight=$('#wrapDate').height();
            dataMoveTime=parseInt(dataHeight/10*1000);

            ///下面
            if(childWidth>$('.wrapTip').width()){
                document.getElementById("tipText").animate([
                    // keyframes
                    { transform: 'translate3d(500px,0,0)',webkitTransform: 'translate3d(500px,0,0)'},
                    { transform: 'translate3d(-'+childWidth+'px,0,0)',webkitTransform:'translate3d(-'+childWidth+'px,0,0)'}
                ], {
                    // timing options
                    duration: moveTime,///滚动时间
                    iterations: Infinity,///循环执行动画，执行次数
//            delay: 10000////延迟执行动画
                });

            }
            ///上面
            if(dataHeight>$('.wrapDate').height()){
                document.getElementById("wrapDate").animate([
                    // keyframes
                    { transform: 'translate3d(0,30px,0)',webkitTransform: 'translate3d(0,30px,0)'},
                    { transform: 'translate3d(0,-'+dataHeight+'px,0)',webkitTransform:'translate3d(0,-'+dataHeight+'px,0)'}
                ], {
                    // timing options
                    duration: dataMoveTime,///滚动时间
                    iterations: Infinity,///循环执行动画，执行次数
//            delay: 10000////延迟执行动画
                });

            }
            /*
             *  ///返回动画对象    两种方式设置文字延迟执行
             * 1、transform: 'translate3d(100px,0,0) 首发位置改成100 /200/300 等距离
             * 2、 delay: 10000  修改延迟执行时间 默认是10秒
             *
             *
             * */

        }


    }

</script>
<script type="text/javascript">
</script>

</html>